import React, { Component } from "react";
import { Button, Table ,Tag,Modal,Input,Tooltip } from 'antd'
import { PlusOutlined } from '@ant-design/icons';
const { Column } = Table
let tableData = [
    {key:'1', county: '住宅', tags: ['品牌开发商', '小户型', 'LOFT', '旅游地产', '低首付', '刚需房','学区房', '拎包入住', '地铁房', '花园洋房', '宜居生态'] },
    {key:'2', county: '商铺', tags: ['高回报率', '底层沿街', '近地铁口', '知名商户入驻', '繁华地带', '独栋','可分割两层', '地下商铺'] },
    {key:'3', county: '写字楼', tags: ['CBD', '繁华商圈', '创业首选', '名企入驻', '高回报率', '交通便利','地标建筑', '总部独栋'] },
]
class Tsbq extends Component {
    constructor(){
        super()
        this.state = {
            tableData:tableData,
            visible:false,
            bjinputv:'',
            //tags
            tags: [],
            inputVisible: false,
            inputValue: '',
            editInputIndex: -1,
            editInputValue: '',

        }
    }
    //编辑tag
    deleteTags=(obj)=>{
        let mydata = []
        this.state.tableData.forEach((item)=>{
            mydata.push(item.key)
        })
        let num = mydata.indexOf(obj.key)
        this.state.tableData.splice(num,1,obj)
        let testdata = [...this.state.tableData]
        this.setState({
            tableData:testdata
        })
    }
    //删除ROW
    deleteRow=(obj)=>{
        console.log(obj);
        let mydata = []
        this.state.tableData.forEach((item)=>{
            mydata.push(item.key)
        })
        let num = mydata.indexOf(obj.key)
        this.state.tableData.splice(num,1)
        let testdata = [...this.state.tableData]
        this.setState({
            tableData:testdata
        })
    }
    //新增modal
    modalCancel=()=>{
        this.setState({
            visible:false
        })
        // this.componentDidMount()
    }
    bianjibtn=()=>{
        this.setState({
            visible:false
        })
        let arr = []
        tableData.forEach((item)=>{
            arr.push(item.key)
        })
        let num = parseInt( arr.sort((a,b)=>{
            return b-a
        }))
        // console.log(num);
        let obj = {
            key:num+1,
            county:this.state.bjinputv,
            tags:this.state.tags
        }
        // console.log(obj);
        let alldata = [...this.state.tableData]
        this.setState({
            tableData:[...alldata,obj]
        })
    }
    addqypz=()=>{
        this.setState({
            visible:true
        })
    }
    //tag
    handleInputConfirm = () => {
    const { inputValue } = this.state;
    let { tags } = this.state;
    if (inputValue && tags.indexOf(inputValue) === -1) {
        tags = [...tags, inputValue];
    }
    console.log(tags);
    this.setState({
        tags,
        inputVisible: false,
        inputValue: '',
    });
    };
    handleEditInputChange = e => {
    this.setState({ editInputValue: e.target.value });
    };
    handleEditInputConfirm = () => {
    this.setState(({ tags, editInputIndex, editInputValue }) => {
        const newTags = [...tags];
        newTags[editInputIndex] = editInputValue;
        return {
        tags: newTags,
        editInputIndex: -1,
        editInputValue: '',
        };
    });
    };
    saveInputRef = input => (this.input = input);
    saveEditInputRef = input => (this.editInput = input);
    //input
    setinputvalue=(e)=>{
        this.setState({
            bjinputv:e.target.value
        })
    }
    handleClose = removedTag => {
        const tags = this.state.tags.filter(tag => tag !== removedTag);
        console.log(tags);
        this.setState({ tags });
      };
    showInput = () => {
    this.setState({ inputVisible: true }, () => this.input.focus());
    };
    handleInputChange = e => {
    this.setState({ inputValue: e.target.value });
    };
    render() {
        const { tags, inputVisible, inputValue, editInputIndex, editInputValue } = this.state;
        return (
            <div>
                <div style={{  padding: '0 0 10px' }}>
                    <Button  onClick={this.addqypz} type='primary'>新增特色标签</Button>
                </div>
                <div>
                    <Table dataSource={this.state.tableData}  >
                        <Column title='物业类型' dataIndex='county' key='county' />
                        <Column title='预设特色标签' dataIndex='tags' key='tags' render={tags => (
                            <>
                                {tags.map(tag => (
                                    <Tag color="blue" key={tag}>
                                        {tag}
                                    </Tag>
                                ))}
                            </>
                        )} />
                        <Column title='操作' key='action' render={(text,record)=>
                            <span>
                                <MtBtn deleteData={this.deleteRow} bjrowdata={this.deleteTags} rowdata={record}/>
                            </span>
                        } />
                    </Table>
                    <Modal
                        title="新增"
                        visible={this.state.visible}
                        onCancel={this.modalCancel}
                        footer={[
                            <Button key='modalqueding' type='primary'  onClick={this.bianjibtn}>
                                确定
                            </Button>,
                            <Button key='modalquxiao' onClick={this.modalCancel}>
                                取消
                            </Button>
                        ]}
                    >
                        <Input value = {this.state.bjinputv} onChange={this.setinputvalue}/>
                        <div style={{margin:'10px 0 0 0 '}}>
                            {tags.map((tag, index) => {
                            if (editInputIndex === index) {
                                return (
                                <Input
                                    ref={this.saveEditInputRef}
                                    key={tag}
                                    size="small"
                                    className="tag-input"
                                    value={editInputValue}
                                    onChange={this.handleEditInputChange}
                                    onBlur={this.handleEditInputConfirm}
                                    onPressEnter={this.handleEditInputConfirm}
                                />
                                );
                            }
                            const isLongTag = tag.length > 20;
                            const tagElem = (
                                <Tag
                                className="edit-tag"
                                key={tag}
                                closable={index !== 0}
                                onClose={() => this.handleClose(tag)}
                                >
                                <span
                                    onDoubleClick={e => {
                                    if (index !== 0) {
                                        this.setState({ editInputIndex: index, editInputValue: tag }, () => {
                                        this.editInput.focus();
                                        });
                                        e.preventDefault();
                                    }
                                    }}
                                >
                                    {isLongTag ? `${tag.slice(0, 20)}...` : tag}
                                </span>
                                </Tag>
                            );
                            return isLongTag ? (
                                <Tooltip title={tag} key={tag}>
                                {tagElem}
                                </Tooltip>
                            ) : (
                                tagElem
                            );
                            })}
                            {inputVisible && (
                            <Input
                                style={{width:'100px'}}
                                ref={this.saveInputRef}
                                type="text"
                                size="small"
                                className="tag-input"
                                value={inputValue}
                                onChange={this.handleInputChange}
                                onBlur={this.handleInputConfirm}
                                onPressEnter={this.handleInputConfirm}
                            />
                            )}
                            {!inputVisible && (
                                <Tag  className="site-tag-plus" onClick={this.showInput}>
                                    <PlusOutlined /> 新增板块级
                                </Tag>
                            )}
                        </div>
                    </Modal>
                </div>
            </div>
        )
    }
}
class MtBtn extends Component{
    constructor(){
        super()
        this.state = {
            visible:false,
            roudata:[],
            bjinputv:'',
            //tags
            tags: [],
            inputVisible: false,
            inputValue: '',
            editInputIndex: -1,
            editInputValue: '',
            //删除MODAL
            Dievisible:false
        }
    }
    componentDidMount(){
        this.setState({
            tags:this.props.rowdata.tags,
            bjinputv:this.props.rowdata.county
        })
    }
    modalCancel=()=>{
        this.setState({
            visible:false
        })
        this.componentDidMount()
    }
    bianjibtn=()=>{
        this.setState({
            visible:false
        })
        let testobj = this.props.rowdata
        testobj.county = this.state.bjinputv
        testobj.tags = this.state.tags
        this.props.bjrowdata(testobj)
    }
    qxszbj=()=>{
        this.setState({
            visible:true
        })
        this.componentDidMount()
    }
    setinputvalue=(e)=>{
        this.setState({
            bjinputv:e.target.value
        })
    }
    deleteCol=()=>{
        this.setState({
            Dievisible: true,
        });
    }
    //删除modalOK
    diemodalok=()=>{
        this.setState({
            Dievisible: false,
        });
        this.props.deleteData(this.props.rowdata)
    }
    //删除modalclear
    diemodalclear=()=>{
        this.setState({
            Dievisible: false,
        });
    }
    //------------------tags
    //删除TAG
    handleClose = removedTag => {
        const tags = this.state.tags.filter(tag => tag !== removedTag);
        console.log(tags);
        this.setState({ tags });
      };
    showInput = () => {
    this.setState({ inputVisible: true }, () => this.input.focus());
    };
    handleInputChange = e => {
    this.setState({ inputValue: e.target.value });
    };

    //添加tag
    handleInputConfirm = () => {
    const { inputValue } = this.state;
    let { tags } = this.state;
    if (inputValue && tags.indexOf(inputValue) === -1) {
        tags = [...tags, inputValue];
    }
    console.log(tags);
    this.setState({
        tags,
        inputVisible: false,
        inputValue: '',
    });
    };
    handleEditInputChange = e => {
    this.setState({ editInputValue: e.target.value });
    };
    handleEditInputConfirm = () => {
    this.setState(({ tags, editInputIndex, editInputValue }) => {
        const newTags = [...tags];
        newTags[editInputIndex] = editInputValue;
        return {
        tags: newTags,
        editInputIndex: -1,
        editInputValue: '',
        };
    });
    };
    saveInputRef = input => (this.input = input);
    saveEditInputRef = input => (this.editInput = input);
    render(){
        const { tags, inputVisible, inputValue, editInputIndex, editInputValue } = this.state;
        return (
            <div>
                <Button onClick={this.qxszbj}>编辑</Button>
                <Button onClick={this.deleteCol} >删除</Button>
                <Modal
                    title="编辑"
                    visible={this.state.visible}
                    onCancel={this.modalCancel}
                    footer={[
                        <Button key='modalqueding' type='primary'  onClick={this.bianjibtn}>
                            确定
                        </Button>,
                        <Button key='modalquxiao' onClick={this.modalCancel}>
                            取消
                        </Button>
                    ]}
                >
                    <Input value = {this.state.bjinputv} onChange={this.setinputvalue}/>
                    <div style={{margin:'10px 0 0 0 '}}>
                        {tags.map((tag, index) => {
                        if (editInputIndex === index) {
                            return (
                            <Input
                                ref={this.saveEditInputRef}
                                key={tag}
                                size="small"
                                className="tag-input"
                                value={editInputValue}
                                onChange={this.handleEditInputChange}
                                onBlur={this.handleEditInputConfirm}
                                onPressEnter={this.handleEditInputConfirm}
                            />
                            );
                        }
                        const isLongTag = tag.length > 20;
                        const tagElem = (
                            <Tag
                            className="edit-tag"
                            key={tag}
                            closable={index !== 0}
                            onClose={() => this.handleClose(tag)}
                            >
                            <span
                                onDoubleClick={e => {
                                if (index !== 0) {
                                    this.setState({ editInputIndex: index, editInputValue: tag }, () => {
                                    this.editInput.focus();
                                    });
                                    e.preventDefault();
                                }
                                }}
                            >
                                {isLongTag ? `${tag.slice(0, 20)}...` : tag}
                            </span>
                            </Tag>
                        );
                        return isLongTag ? (
                            <Tooltip title={tag} key={tag}>
                            {tagElem}
                            </Tooltip>
                        ) : (
                            tagElem
                        );
                        })}
                        {inputVisible && (
                        <Input
                            style={{width:'100px'}}
                            ref={this.saveInputRef}
                            type="text"
                            size="small"
                            className="tag-input"
                            value={inputValue}
                            onChange={this.handleInputChange}
                            onBlur={this.handleInputConfirm}
                            onPressEnter={this.handleInputConfirm}
                        />
                        )}
                        {!inputVisible && (
                            <Tag  className="site-tag-plus" onClick={this.showInput}>
                                <PlusOutlined /> 添加tag
                            </Tag>
                        )}
                    </div>
                </Modal>
                 {/* 删除modal */}
                 <Modal
                    title="提示"
                    visible={this.state.Dievisible}
                    footer={[
                        <Button key='diemodalqueding' type='primary'  onClick={this.diemodalok}>
                            确定
                        </Button>,
                        <Button key='diemodalquxiao' onClick={this.diemodalclear}>
                            取消
                        </Button>
                    ]}
                    >
                    <p>你确定要删除吗？</p>
                </Modal>
            </div>
        )
    }
}
export default Tsbq